<template>
<div id="TeamOrGroupPage">
            <div style="display: -webkit-flex;background-color: rgb(247,247,255); margin-top:10px; z-index:5;">
                <div style="width: 500px; height:50px;  line-height: 50px;">
                    <span style="font-size: 18px;cursor:pointer;margin-left:5px;" @click="addDialogVisible=true,queryGroup(),Armember.ararmembersex=radio"><i class="el-icon-s-order" ></i>增加员工</span>&nbsp;&nbsp;&nbsp;
                    <span style="font-size: 18px;cursor:pointer" @click="clickAmend()"><i class="el-icon-edit"></i>修改员工</span>&nbsp;&nbsp;&nbsp;
                    <span style="font-size: 18px;cursor:pointer" @click="removeArmember()"><i class="el-icon-delete"></i>删除员工</span>
                    </div>
                    <div style="width:380px; margin-left:420px;line-height: 50px;">
                    <el-input v-model="armembername" placeholder="请输入员工姓名" style="width:300px;color: rgb(247,247,255) "></el-input>&nbsp;
                    <el-button type="primary" @click="QueryButton()">搜索</el-button>
                </div>
            </div>
			<!--班组信息-->
			<div style="display: -webkit-flex;margin: 0 auto; margin-top:10px; ">
				<!--班组分类-->
				<div style="width: 200px; border: 1px solid #999; margin-left:3px">
					<!--标题-->
					<div style="width: 200px; height: 40px; border-bottom: 1px solid #999; background-color: rgb(247,247,247); text-align: center;line-height: 40px; ">
						班组类型
					</div>
					<!--树状图-->
					<div style="width:200px;  background-color: rgb(247,247,247);">
						<el-tree :data="Artisans" :props="defaultProps" @node-click="handleNodeClick" @node-contextmenu="rihgtClick"></el-tree>
					</div>

					<!--右击菜单-->
					<div v-show="menuVisible">
						<ul style="z-index: 100;" id="menu" class="menu">
							<li class="menu__item" id="li1" @click="addTeamOrGroup=true,queryGroupClassIfy()">添加班组</li>
							<li class="menu__item" id="li2" @click="ModifyTeamOrGroup = true,queryGroupClassIfy()">修改班组</li>
							<li class="menu__item" id="li3" @click="deleteArtisans()">删除班组</li>
						</ul>
					</div>
				</div>

				<!--班组成员信息-->
				<div style=" height:536px; margin-left:19px;border: 1px solid #999;">
					<!--标题-->
					<div style="width:100%; height: 40px; border-bottom: 1px solid #999; background-color: rgb(247,247,247); text-align: center; line-height: 40px; ">
						班组员工
					</div>
					<template>
						<el-table :data="PageInfo.list" border ref="singleTable" highlight-current-row @current-change="handleCurrentChanges">
							<el-table-column prop="artisansid" label="班组编号" width="80">
							</el-table-column>
							<el-table-column prop="artisansname" label="班组名称" width="90">
							</el-table-column>
							<el-table-column prop="ararmemberno" label="技工编号" width="90">
							</el-table-column>
							<el-table-column prop="armembername" label="姓名" width="90">
							</el-table-column>
							<el-table-column prop="ararmembersex" label="性别" width="70">
								<template slot-scope="temp">
									<span v-if="temp.row.ararmembersex==0">男</span>
									<span v-if="temp.row.ararmembersex==1">女</span>
								</template>
							</el-table-column>
							<el-table-column prop="starname" label="职位星级" width="80">
							</el-table-column>
							<el-table-column prop="isar" label="工作职位" width="90">
								<template slot-scope="temp">
									<span v-if="temp.row.isar==0">组员</span>
									<span v-if="temp.row.isar==1">组长</span>
								</template>
							</el-table-column>
							<el-table-column prop="armembername" label="技工姓名">
							</el-table-column>
							<el-table-column prop="arphone" label="联系电话" width="120">
							</el-table-column>
							<el-table-column prop="araddress" label="家庭地址" width="155">
							</el-table-column>
							<el-table-column prop="worktype" label="工种" width="70">
							</el-table-column>
							<el-table-column prop="keepclass" label="维修品牌" width="80">
							</el-table-column>
						</el-table>
						<!--分页-->
						<div style="padding-top: 20px;"></div>
						<div v-if="size!=0">
							<el-pagination style="text-align: center;" :background="true" :pager-count="7" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="PageInfo.pageNum" :page-size="PageInfo.pageSize" :total="PageInfo.total" :page-sizes="[3,5]" layout="total, sizes, prev, pager, next, jumper">
							</el-pagination>
						</div>
					</template>
				</div>
			</div>

			<!--新增成员-->
			<el-dialog title="新增班组成员" :visible.sync="addDialogVisible" width="70%" :before-close="handleCloses">
				<div style="margin: 0 auto; line-height: 60px;">
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">技工编号:</span>&nbsp;
					<el-input placeholder="员工编号" v-model="Armember.ararmemberno" style="width:150px;"></el-input>&nbsp;
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">技工姓名:</span>&nbsp;
					<el-input placeholder="员工姓名" v-model="Armember.armembername" style="width:150px;"></el-input>&nbsp;
					<!--手机-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">技工手机:</span>&nbsp;
					<el-input placeholder="员工手机" v-model="Armember.arphone" style="width:150px;"></el-input>&nbsp;

					<!--性别-->
					<span style="color: red;">*</span>&nbsp;
					<span style="font-size: 18px;">
						性别:&nbsp;
						<template>
							<el-radio @change="radios" v-model="radio" label="0">男</el-radio>
							<el-radio @change="radios" v-model="radio" label="1" style="margin-left: -30px;">女</el-radio>
						</template>
					</span>
					<!--是否是组长-->
					<template>
						<!-- `checked` 为 true 或 false -->
						<el-checkbox style="margin-left: 30px;" v-model="checked">组长</el-checkbox>
					</template><br />

					<!--所在班组-->
					<span style="color: red;">*</span>
					<span style="font-size: 18px;">所在班组:</span>&nbsp;
					<template>
						<el-select style="width: 150px;" v-model="value" placeholder="请选择">
							<el-option v-for="item in shift" :key="item.artisansid" :label="item.artisansname" :value="item.artisansid">
							</el-option>
						</el-select>
					</template>&nbsp;

					<!--账号-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">登录账号:</span>&nbsp;
					<el-input placeholder="员工账号" v-model="Armember.araccount" style="width:150px;"></el-input>&nbsp;
					<!--密码-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">登录密码:</span>&nbsp;
					<el-input placeholder="员工密码" show-password v-model="Armember.arapwd" style="width:150px;"></el-input>&nbsp;
					<!--工种-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">维修工种:</span>&nbsp;
					<el-input placeholder="维修工种" v-model="Armember.worktype" style="width:150px;"></el-input>&nbsp;<br />

					<!--维修品牌-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">维修品牌:</span>&nbsp;
					<el-input placeholder="维修品牌" v-model="Armember.keepclass" style="width:150px;"></el-input>&nbsp;
					<!--等级编码-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">员工星级:</span>&nbsp;
					<template>
						<el-select v-model="value3" placeholder="请选择" @change="changes">
							<el-option v-for="item in ArtisanGradeVO" :key="item.starid" :label="item.starname" :value="item.starid">
							</el-option>
						</el-select>
					</template>
					<!--权重-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">星级权重:</span>&nbsp;
					<el-input v-model="multiple" style="width: 200px;" :disabled="true">
					</el-input><br />

					<!--家庭地址-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">家庭地址:</span>&nbsp;
					<el-input placeholder="员工家庭地址" v-model="Armember.araddress" style="width:408px;"></el-input>&nbsp;
				</div>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="addDialogVisible = false,emptyTheOptions()">取 消</el-button>
			    <el-button type="primary"  @click="addArmember()">确 定</el-button>
			    </span>
			</el-dialog>

			<!--修改员工-->
			<el-dialog title="新增班组成员" :visible.sync="ModifyDialogVisible" width="70%" :before-close="handleCloses">
				<div style="margin: 0 auto; line-height: 60px;">
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">技工编号:</span>&nbsp;
					<el-input placeholder="员工编号" v-model="currentRow.ararmemberno" style="width:150px;"></el-input>&nbsp;
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">技工姓名:</span>&nbsp;
					<el-input placeholder="员工姓名" v-model="currentRow.armembername" style="width:150px;"></el-input>&nbsp;
					<!--手机-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">技工手机:</span>&nbsp;
					<el-input placeholder="员工手机" v-model="currentRow.arphone" style="width:150px;"></el-input>&nbsp;

					<!--性别-->
					<span style="color: red;">*</span>&nbsp;
					<span style="font-size: 18px;">
						性别:&nbsp;
						<template>
							<el-radio @change="radios" v-model="radio" label="0">男</el-radio>
							<el-radio @change="radios" v-model="radio" label="1" style="margin-left: -30px;">女</el-radio>
						</template>
					</span>
					<!--是否是组长-->
					<template>
						<!-- `checked` 为 true 或 false -->
						<el-checkbox style="margin-left: 30px;" v-model="groupLeader">组长</el-checkbox>
					</template><br />

					<!--所在班组-->
					<span style="color: red;">*</span>
					<span style="font-size: 18px;">所在班组:</span>&nbsp;
					<template>
						<el-select style="width: 150px;" v-model="currentRow.artisansid" placeholder="请选择">
							<el-option v-for="item in shift" :key="item.artisansid" :label="item.artisansname" :value="item.artisansid">
							</el-option>
						</el-select>
					</template>&nbsp;

					<!--账号-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">登录账号:</span>&nbsp;
					<el-input placeholder="员工账号" v-model="currentRow.araccount" style="width:150px;"></el-input>&nbsp;
					<!--密码-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">登录密码:</span>&nbsp;
					<el-input placeholder="员工密码" show-password v-model="currentRow.arapwd" style="width:150px;"></el-input>&nbsp;
					<!--工种-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">维修工种:</span>&nbsp;
					<el-input placeholder="维修工种" v-model="currentRow.worktype" style="width:150px;"></el-input>&nbsp;<br />

					<!--维修品牌-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">维修品牌:</span>&nbsp;
					<el-input placeholder="维修品牌" v-model="currentRow.keepclass" style="width:150px;"></el-input>&nbsp;
					<!--等级编码-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">员工星级:</span>&nbsp;
					<template>
						<el-select v-model="currentRow.starid" placeholder="请选择" @change="changes">
							<el-option v-for="item in ArtisanGradeVO" :key="item.starid" :label="item.starname" :value="item.starid">
							</el-option>
						</el-select>
					</template>
					<!--权重-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">星级权重:</span>&nbsp;
					<el-input v-model="weight" style="width: 200px;" :disabled="true">
					</el-input><br />
					<!--家庭地址-->
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">家庭地址:</span>&nbsp;
					<el-input placeholder="员工家庭地址" v-model="currentRow.araddress" style="width:408px;"></el-input>&nbsp;
				</div>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="ModifyDialogVisible = false,cancel()">取 消</el-button>
			    <el-button type="primary"  @click="ModifyDialogVisible = false,amendArmember()">确 定</el-button>
			    </span>
			</el-dialog>

			<!--新增班组-->
			<el-dialog title="新增班组" :visible.sync="addTeamOrGroup" width="50%" :before-close="handleCloses">
				<div style="margin: 0 auto; line-height: 60px; text-align: center;">
					<span style="color: red;">*</span>
					<span style="font-size: 18px;">班组类别:</span>&nbsp;
					<template>
						<el-select style="width: 150px;" v-model="newArtisans.gclassifyid" placeholder="请选择">
							<el-option v-for="item in Groupclassify" :key="item.gclassifyid" :label="item.gclassifyname" :value="item.gclassifyid">
							</el-option>
						</el-select>
					</template>&nbsp;
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">班组名称:</span>&nbsp;
					<el-input placeholder="班组名称" v-model="newArtisans.artisansname" style="width:150px;"></el-input>&nbsp;
				</div>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="addTeamOrGroup = false">取 消</el-button>
			    <el-button type="primary"  @click="addArtisans()">确 定</el-button>
			    </span>
			</el-dialog>

			<!--修改班组-->
			<el-dialog title="新增班组" :visible.sync="ModifyTeamOrGroup" width="50%" :before-close="handleCloses">
				<div style="margin: 0 auto; line-height: 60px; text-align: center;">
					<span style="color: red;">*</span>
					<span style="font-size: 18px;">班组类别:</span>&nbsp;
					<template>
						<el-select style="width: 150px;" v-model="gclassifyids" placeholder="请选择">
							<el-option v-for="item in Groupclassify" :key="item.gclassifyid" :label="item.gclassifyname" :value="item.gclassifyid">
							</el-option>
						</el-select>
					</template>&nbsp;
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">班组名称:</span>&nbsp;
					<el-input placeholder="班组名称" v-model="artisansname" style="width:150px;"></el-input>&nbsp;
				</div>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="ModifyTeamOrGroup = false">取 消</el-button>
			    <el-button type="primary"  @click="ModifyTeamOrGroup = false,ModifyArtisansButton()">确 定</el-button>
			    </span>
			</el-dialog>
		</div>
</template>

<script>
export default {
    
data() {
//这里存放数据
return {
        menuVisible: false, //右击菜单
        addTeamOrGroup: false, //新增班组
        ModifyTeamOrGroup: false, //修改班组
        Artisans: [],
        defaultProps: {
            children: 'artisansVOList',
            label: 'artisansname',
        },
        PageInfo: {},
        artisansid: "",
        size: "",
        armembername: "",
        addDialogVisible: false,
        "radio": '0',
        checked: false,
        /*查询班组*/
        shift: [],
        value: '',
        /*查询星级*/
        ArtisanGradeVO: [],
        value3: '',
        multiple: "", //权重
        Armember: {},
        /*修改员工*/
        currentRow: {},
        ModifyDialogVisible: false,
        teamName: "", //班组名称
        starid: "", //星级编号
        weight: "", //权重
        groupLeader: false, //组长 
        /*右击菜单*/
        gclassifyid: "", //班组类型id
        /*查询班组类别*/
        Groupclassify: [],
        /*班组对象*/
        newArtisans: {},
        /*修改班组对象*/
        gclassifyids: "",
        artisansname: "",
        ModifyArtisans: {},
        /*删除班组对象*/
        artisansids: "",
    };
},
//计算属性
computed: {},
//方法集合
methods: {
    /*删除班组信息*/
    deleteArtisans() {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            let _this = this;
            	_this.$http.delete(`http://localhost:8080/api/ArtisansAction/deleteArtisans/${this.artisansids}`).then(function (resp){
                if(resp.data.code == "200") {
                    _this.$message({
                        message: '恭喜你，删除成功!!',
                        type: 'success'
                    });
                    _this.showInfo();
                    _this.gotoPage(1, 5);
                } else {
                    _this.$message.error('错了哦，修改失败!!');
                }
            });
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });
    },

    /*修改班组确定按钮*/
    ModifyArtisansButton() {
        let _this = this;
        this.ModifyArtisans.gclassifyid = this.gclassifyids;
        this.ModifyArtisans.artisansname = this.artisansname;
       	_this.$http.put("http://localhost:8080/api/ArtisansAction/ModifyArtisans", this.ModifyArtisans).then(function (resp){
            if(resp.data.code == "200") {
                _this.$message({
                    message: '恭喜你，修改成功!!',
                    type: 'success'
                });
                _this.showInfo();
            } else {
                _this.$message.error('错了哦，修改失败!!');
            }
        });
    },

    /*新增班组*/
    addArtisans() {
          let _this=this;
        if(this.newArtisans.artisansname==null || this.newArtisans.artisansname==""){
             _this.$message.error('错了哦，请输入班组名称!!');
             return;
        }
      
        	_this.$http.post("http://localhost:8080/api/ArtisansAction/addArtisans", this.newArtisans).then(function (resp){
            if(resp.data.code == "200") {
                _this.$message({
                    message: '恭喜你，新增成功!!',
                    type: 'success'
                });
                _this.newArtisans={};
                _this.showInfo();
                _this.addTeamOrGroup = false;

            } else {
                _this.$message.error('错了哦，新增失败!!');
            }
        });
    },
    /*查询班组类别*/
    queryGroupClassIfy() {
        let _this=this;
        _this.$http.get(`http://localhost:8080/api/ArtisansAction/queryGroupClassIfy`).then(function (resp){
            _this.Groupclassify = resp.data;
        });
    },

    /*右击菜单*/
    rihgtClick(MouseEvent, object, Node, element) {
        let _this=this;
        if(object.artisansid == null) {
            this.newArtisans.gclassifyid = object.gclassifyid;
            _this.$("#li1").css({
                "pointer-events": "auto",
                "color": "#000000"
            });
            
            _this.$("#li2").css({
                "pointer-events": "none",
                "color": "#999999"
            });
             _this.$("#li3").css({
                "pointer-events": "none",
                "color": "#999999"
            });
        } else {
             _this.$("#li1").css({
                "pointer-events": "none",
                "color": "#999999"
            });
            
             _this.$("#li2").css({
                "pointer-events": "auto",
                "color": "#000000"
            });
             _this.$("#li3").css({
                "pointer-events": "auto",
                "color": "#000000"
            });
            this.artisansids = object.artisansid;
            this.gclassifyids = object.gclassifyid;
            this.artisansname = object.artisansname;
            this.ModifyArtisans.artisansid = object.artisansid;
            
        }
        this.menuVisible = false; //先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
        this.menuVisible = true; //显示模态窗口，跳出自定义菜单栏
        var menu = document.querySelector('#menu');
        menu.style.left = MouseEvent.clientX + 14 + 'px';
        document.addEventListener('click', this.foo); //给整个document添加监听鼠标事件，点击任何位置执行foo方法
        menu.style.top = MouseEvent.clientY - 10 + 'px';
    },
    // 取消鼠标监听事件 菜单栏
    foo() {
        this.menuVisible = false
        document.removeEventListener('click', this.foo) //要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    },
    /*删除*/
    removeArmember() {
         let _this = this;
            if(this.currentRow.starid == null) {
                this.$message.error('错了哦，请选择要修改的组员!!');
                return;
            };
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
           	_this.$http.delete(`http://localhost:8080/api/ArtisansAction/removeArmember/${_this.currentRow.armemberid}`).then(function (resp){
                if(resp.data.code == "200") {
                    _this.$message({
                        message: '恭喜你，删除成功!!',
                        type: 'success'
                    });
                    _this.gotoPage(_this.PageInfo.pageNum, _this.PageInfo.pageSize);
                } else {
                    _this.$message.error('错了哦，删除失败!!');
                }
            });
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });

    },

    /*修改取消按钮*/
    cancel() {
        this.gotoPage(this.PageInfo.pageNum, this.PageInfo.pageSize);
    },
    /*修改班组成员确认按钮*/
    amendArmember() {
        let _this = this;
        if(this.groupLeader) {
            this.currentRow.isar = 1;
        } else {
            this.currentRow.isar = 0;
        }
       	_this.$http.put("http://localhost:8080/api/ArtisansAction/amendArmember", this.currentRow).then(function (resp){
            if(resp.data.code == "200") {
                _this.$message({
                    message: '恭喜你，修改成功!!',
                    type: 'success'
                });
                _this.gotoPage(_this.PageInfo.pageNum, _this.PageInfo.pageSize);
            } else {
                _this.$message.error('错了哦，修改失败!!');
            }
        });
    },

    /*点击修改*/
    clickAmend() {
        if(this.currentRow.ararmemberno == null) {
            this.$message.error('错了哦，请选择要修改的组员!!');
            return;
        }
        this.queryGroup();
        this.ModifyDialogVisible = true;

    },
    /*选择组员进行修改*/
    handleCurrentChanges(val) {
        if(val == null) {
            this.currentRow = {};
            return;
        }
        for(let i = 0; i < this.ArtisanGradeVO.length; i++) {
            if(this.ArtisanGradeVO[i].starid == val.starid) {
                this.weight = this.ArtisanGradeVO[i].multiple;
            }
        }
        if(val.isar == 1) {
            this.groupLeader = true;
        } else {
            this.groupLeader = false;
        }
        this.currentRow = val;
    },
    /*新增员工确定事件***********************************************/
    addArmember() {
        let _this = this;
        //所在班组
        this.Armember.artisansid = this.value;
        //是否组长
        if(this.checked) {
            //组长
            this.Armember.isar = 1;
        } else {
            //非组长
            this.Armember.isar = 0;
        }
        if(this.Armember.ararmemberno==null){
              _this.$message.error('错了哦，请输入员工编号!!');
              return;
        }
         if(this.Armember.armembername==null){
              _this.$message.error('错了哦，请输入员工名称!!');
              return;
        }
        if(this.Armember.arphone==null){
              _this.$message.error('错了哦，请输入员工手机号码!!');
              return;
        }
         if(this.value==""){
              _this.$message.error('错了哦，请输入所在班组!!');
              return;
        } if(this.Armember.araccount==null){
              _this.$message.error('错了哦，请输入登录账号!!');
              return;
        }
         if(this.Armember.arapwd==null){
              _this.$message.error('错了哦，请输入登录密码!!');
              return;
        }
         if(this.Armember.worktype==null){
              _this.$message.error('错了哦，请输入维修工种!!');
              return;
        }
         if(this.Armember.keepclass==null){
              _this.$message.error('错了哦，请输入维修品牌!!');
              return;
        }
         if(this.Armember.starid==null){
              _this.$message.error('错了哦，请选择员工星级!!');
              return;
        }
         if(this.Armember.araddress==null){
              _this.$message.error('错了哦，请输入家庭地址!!');
              return;
        }
        	_this.$http.post("http://localhost:8080/api/ArtisansAction/addArmember", _this.Armember).then(function (resp){
            if(resp.data.code == "200") {
                _this.$message({
                    message: '恭喜你，新增成功!!',
                    type: 'success'
                });
                _this.Armember={};
                _this.gotoPage(1, 5);
                _this.emptyTheOptions();
                _this.addDialogVisible = false;
            } else {
                _this.$message.error('错了哦，员工编号已存在!!');
            }
        });

    },
    /*清空选项*/
    emptyTheOptions() {
        this.checked = false;
        this.value = "";
        this.value3 = "";
        this.multiple = "";
        this.radio = "0";
    },

    /*树状图*/
    handleNodeClick(data) {
        if(JSON.stringify(data.artisansid) != undefined) {
            this.armembername = "";
            this.artisansid = data.artisansid;
            this.artisansname = data.artisansname
            this.gotoPage(1, 5);
        }
    },
    /*分页*/
    handleSizeChange(val) {
        this.gotoPage(this.PageInfo.pageNum, val);
    },
    handleCurrentChange(val) {
        this.gotoPage(val, this.PageInfo.pageSize);

    },
    /*显示树状图方法*/
    showInfo() {
        let _this = this;
        	_this.$http.get(`http://localhost:8080/api/ArtisansAction/queryArtisans`).then(function (resp){
            _this.Artisans = resp.data;
            _this.childrens = _this.Artisans.ArtisansVOList;
          //  alert(JSON.stringify(_this.Artisans));
        });
    },
    /*显示班组成员数据*/
    gotoPage(PageNum, PageSize) {
        let _this = this;
       	_this.$http.get(`http://localhost:8080/api/ArtisansAction/queryArmember/${PageNum}/${PageSize}`, {
            params: {
                "artisansid": this.artisansid,
                "armembername": this.armembername
            }
        }).then(function (resp){
            _this.PageInfo = resp.data;
            /*for(let i = 0; i < _this.PageInfo.list.length; i++) {
                _this.PageInfo.list[i].artisansname = _this.artisansname;
            }*/
            _this.size = _this.PageInfo.list.length;
        });
    },
    /*查询按钮*/
    QueryButton() {
        this.artisansid = null;
        this.gotoPage(1, 5);

    },
    /*新增成员弹出框取消关闭方法*/
    handleCloses(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
                this.emptyTheOptions();
                this.gotoPage(this.PageInfo.pageNum, this.PageInfo.pageSize);
                done();
            })
            .catch(_ => {});
    },
    /*查询班组*/
    queryGroup() {
        let _this = this;
      	_this.$http.get(`http://localhost:8080/api/ArtisansAction/queryShift`).then(function (resp){
            _this.shift = resp.data;
        });
    },
    /*查询星级*/
    queryArtisanGradeVO() {
        let _this = this;
       	_this.$http.get(`http://localhost:8080/api/ArtisanGradeAction/queryArtisanGradeVO`).then(function (resp){
            _this.ArtisanGradeVO = resp.data;
        });
    },
    /*选择星级下拉框改变事件*/
    changes(item) {
        for(let i = 0; i < this.ArtisanGradeVO.length; i++) {
            if(this.ArtisanGradeVO[i].starid == item) {
                this.multiple = this.ArtisanGradeVO[i].multiple;
                this.weight = this.ArtisanGradeVO[i].multiple;
            }
        }
        this.Armember.starid = item;

    },
    radios() {
        this.Armember.ararmembersex = this.radio;
    }

},
//挂载完成（可以访问DOM元素）
mounted() {
    this.showInfo();
    this.gotoPage(1, 5);
    this.queryArtisanGradeVO();
},
//监控data中的数据变化
watch: {

}
}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
.menu__item {
			display: block;
			line-height: 20px;
			margin-left: -37px;
			text-align: center;
			margin-top: 10px;
		}
		
		.menu {
			height: 100px;
			width: 100px;
			position: absolute;
			border: 1px solid #999999;
			background-color: #f4f4f4;
		}
		
		.menu__item:hover {
			background-color: #999;
			color: white;
		}
</style>